<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="ul"></ul>

    <script>

        const total = 10000;
        const ul = document.getElementById("ul");
        const once = 20;
        const page = total/once
        let index = 0;

        function loop(curTotal, curIndex) {
            if(curTotal <= 0) return;

            
            let pageCount = Math.min(once,curTotal)

            requestAnimationFrame(()=>{
                for(let i = 0; i < pageCount; i++){
                    const li = document.createElement("li");
                    li.innerText = curIndex + i + ":" + ~~(Math.random() * total);
                    ul.appendChild(li);
                }
                loop(curTotal - pageCount, curIndex + pageCount)
                
            })
        }
        loop(total,index)
        
        
    </script>
</body>
</html>